<template>
	<view class="Warpper">
		<view class="container" :style="{ backgroundImage: `url(${bjImg})` }">
			<view class="Box">
				<view class="list" @click="toUrl('/Reserve/Makelist')">
					<view class="Name">预订订单</view>
					<view class="Info">
						<text class="textCh">预订的订单</text>
						<text class="textEn">Reservation orders</text>
					</view>
				</view>
				<view class="list" @click="toUrl('/userPage/distributors/agent?state=0')">
					<view class="Name">分享推荐</view>
					<view class="Info">
						<text class="textCh">我的分享</text>
						<text class="textEn">My share</text>
					</view>
				</view>
				<view class="list" @click="toUrl('/pages/artList/artList')">
					<view class="Name">新鲜事</view>
					<view class="Info">
						<text class="textCh">一期一会</text>
						<text class="textEn">Fresh news</text>
					</view>
				</view>

				<view class="list" @click="toUrl('/pages/reserve/formSubmit?ordId=2491')">
					<view class="Name">反馈</view>
					<view class="Info">
						<text class="textCh">我的反馈</text>
						<text class="textEn">My feedback</text>
					</view>
				</view>

				<view class="list" @click="toUrl('/otherPage/article/artDetail?artId=34000')">
					<view class="Name">公告</view>
					<view class="Info">
						<text class="textCh">最新信息</text>
						<text class="textEn">Latest information</text>
					</view>
				</view>
			</view>
		</view>
		<tabBar :tab="2"></tabBar>
		<showModel @cancelFunc="closeModel" goHome="0" v-if="showModal" type="2"></showModel>
	</view>
</template>

<script>
	import contact from '@/components/contact/contact.vue';
	import Deposit from '@/components/User/Deposit.vue';
	import { mapState } from 'vuex';
	import gridCard from '@/components/User/gridCard.vue';
	import Bannel from '@/components/home/Bannel.vue';
	import adv from '@/components/home/adv.vue';
	import hotZone from '@/components/home/hotZone.vue';
	import divider from '@/components/home/divider.vue';
	import store from '@/store/index.js';
	export default {
		components: {
			contact,
			Deposit,
			gridCard,
			Bannel,
			adv,
			hotZone,
			divider,
		},
		data() {
			return {
				imgUrl: this.imgUrl,
				Result: '',
				userinfo: '', // 用户信息
				configJson: '', // 会员卡信息
				orderCount: '',
				money: 0,
				unit: '',
				wxQRCode: '',
				wxQRCode_switch: false,
				signInState: '0', // 活动开启 1开启 0未开启  未开启则去旧签到功能界面
				footprint: 0, // 足迹
				isDeposit: false, // 退押金
				noPayOrde: {}, // 仓库数量
				toTop: false,
				showModal: false,
				topImg: '',
				bjImg: '',
			};
		},
		onLoad() {},
		onShow() {
			this.getUserinfo();
		},
		methods: {
			getUserinfo() {
				this.$http
					.post({
						url: '/SRA_userIntegral/myInfo',
						data: {
							VeriCode: this.bid,
							vId: this.vid,
						},
					})
					.then((res) => {
						const Result = res.data;
						if (!Result) return;
						this.Result = Result;
						this.signInState = Result.signInState;
						this.userinfo = Result.myJson;
						this.topImg = Result.topImg;
						this.bjImg = Result.bjImg;
						if (Result.userInfo) store.commit('getUser', { userInfo: Result.userInfo });
					});
			},
			toUrl(url, flag = true) {
				// flag:是否判断vid
				if (flag && (!this.vid || this.vid == 0)) {
					this.showModal = true;
					return;
				}
				if (url) {
					if (url == '/userPage/login/binding?type=1') {
						// #ifdef MP-WEIXIN
						this.showModal = true;
						return;
						// #endif
					}
					uni.navigateTo({
						url: url,
					});
				}
			},
			closeModel() {
				this.showModal = false;
				this.getUserinfo();
			},
		},

		computed: {
			...mapState([
				'vid',
				'bid',
				'logo',
				'nameDefinition',
				'startUp',
				'color',
				'tabTitle',
				'share',
				'totalHeight',
			]),
		},

		onShareAppMessage() {
			let share = this.share;
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: `${share.imageUrl}`,
			};
		},
	};
</script>

<style lang="scss">
	// page {
	// 	background-color: #fff3de;
	// }
</style>
<style scoped lang="scss">
	.Warpper {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		.container {
			flex: 1;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			padding-top: 470rpx;
		}
		.Box {
			width: 690rpx;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 0 40rpx;
			.list:last-child {
				border-bottom: none !important;
			}
			.list {
				width: 100%;
				height: 160rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #b80a0a;
				.Name {
					padding-left: 40rpx;
					position: relative;
					color: #000;
					font-size: 32rpx;
				}
				.Name::after {
					content: '';
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					background-color: #b80a0a;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}

				.Info {
					display: flex;
					flex-direction: column;
					align-items: center;
					.textCh {
						color: #000;
						font-size: 30rpx;
					}
					.textEn {
						color: #000;
						font-size: 20rpx;
					}
				}
			}
		}
	}
</style>
